<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<!DOCTYPE html>

<html xmlns:c="http://java.sun.com/jsp/jstl/core">
<head>
	<!-- CSS-Dateien verknÃ¼pfen -->
    <link type="text/css" rel="stylesheet" href="<c:url value="/resources/style/standard.css"/>" />
	<link type="text/css" rel="stylesheet" href="<c:url value="/resources/style/seriendatenbank.css"/>" />
	<title>Seriendatenbak</title>
</head>

<body>
	<!-- Header mit Menüleiste -->
	<%@ include file="./header.jsp" %>
	
	<div class="text">
		<h1>Seriendatenbank</h1>
		<br/><p>Auf dieser Seite ist eine Liste der Serien, die bis jetzt in unsere Datenbank aufgenommen wurden.</p>
		<br/><p>Ist deine Serie nicht dabei? Dann gib uns Bescheid! Falls du nicht weißt wie, so lese in unserem FAQ nach!</p>
	</div>
	
	<%-- Auswahlliste der Sortierungen 
	 	 Aktuelle sortierung vorgewählt --%>
	 	 
	<form id="sortierung">
		<label>Sortierung auswählen:</label>
		<select name="sortierungsauswahl" id="sortierungsauswahl"
						onChange="top.location.href = this.form.sortierungsauswahl.options[this.form.sortierungsauswahl.selectedIndex].value;
						return false;">
			<option value="<c:url value="/serien/datenbank?order=serientitel" /> "  <c:if test="${order eq 'serientitel'}">selected</c:if>>Titel</option>
			<option value="<c:url value="/serien/datenbank?order=genrename" /> " 	<c:if test="${order eq 'genrename'}">selected</c:if>>Genre</option>
			<option value="<c:url value="/serien/datenbank?order=jahr" /> " 		<c:if test="${order eq 'jahr'}">selected</c:if>>Jahr</option>
			<option value="<c:url value="/serien/datenbank?order=herkunftsland" /> "<c:if test="${order eq 'herkunftsland'}">selected</c:if>>Herkunftsland</option>
		</select>
	</form>
	
	<div id="serienliste">
		<table>
			<thead>
				<tr class="titelzeile">
					<th>Titel</th>
					<th>Genre</th>
					<th>Jahr</th>
					<th>Herkunftsland</th>
				</tr>
			</thead>
			
			<%-- Serienliste anzeigen - 10 pro Seite --%>
			<c:forEach var="i"  begin="${(page - 1) * 10}" end="${page * 10 - 1}">
				<c:if test="${not empty serienListe[i]}">
					<tr class="liste">
						<td class="titel">
							<a href="<c:url value="/serien/${fn:replace(serienListe[i].titel, ' ', '-')}" /> ">${serienListe[i].titel}</a>
						</td>
						<td class="genre">${serienListe[i].genre}</td>
						<td class="jahr">${serienListe[i].jahr}</td>
						<td class="land">${serienListe[i].herkunftsland}</td>
					</tr>
				</c:if>
			</c:forEach>
		</table>
	</div>
	
	<%-- Navigationspfeile und -nummern --%>
	<div id="navigation">
		<%--Wenn die Seite nicht die erste ist, den Pfeil nach links anzeigen --%>
		<c:if test="${page > 1}">
			<span class="pfeil">
				<a href="<c:url value="/serien/datenbank?order=${order}&page=${page - 1}" /> ">&lt;</a>
			</span>
		</c:if>
		
		<%-- Anzahl der Seiten anzeigen, aktuelle Seite fett anzeigen --%>
		<span id="numbers">
			<c:forEach var="i" begin="1" end="${anzahlSeiten}">
				<span class="zahl">
					<%-- Links setzen, der aktuellen Seittennummer nicht anklickbar machen --%>
					<c:if test="${i != page}">
						<a href="<c:url value="/serien/datenbank?order=${order}&page=${i}" /> ">${i}</a>
					</c:if>
					<c:if test="${i == page}">
						<strong>${i}</strong>
					</c:if>
				</span>
			</c:forEach>
		</span>
		
		<%--Wenn die Seite nicht die letzte ist, den Pfeil nach rechts anzeigen --%>
		<c:if test="${page < anzahlSeiten }">
			<span class="pfeil">
				<a href="<c:url value="/serien/datenbank?order=${order}&page=${page + 1}" /> ">&gt;</a>
			</span>
		</c:if>
	</div>
	
	<!-- Footer -->
	<%@ include file="./footer.jsp" %>
	
	<%-- ContextPath für JS mitgeben --%>
	<span id="contextPath" style="display:none;"><%request.getContextPath();%></span>
	
	<!--  JQuery & JavaScript Scripte einbinden -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src=" <c:url value="/resources/script/standard.js"/> "></script>
    <script type="text/javascript" src=" <c:url value="/resources/script/tableRowTitelLinks.js"/> "></script>
</body>
</html>